<template>
    <div id="main">
        <img class="leftimg" src="../../assets/image/left1.png" alt="">
        <div id="rightbox">
            <h2 id="topword">欢迎来到云隐</h2>
            <span id="twoword">让音乐,成为信仰</span>
            <div id="minword" @click="tojoin">立即注册</div>
            <div id="minword0" @click="tologin">登录云隐</div>
            <div id="login">
          <form>
                <input class="maininput" type="text" id="logintel" placeholder=" 请输入手机号码">
            <input class="maininput" type="password" id="loginpas" placeholder=" 请输入密码">
          </form>
            <div id="pastip" v-show="pascode==400">密码好像不正确哦</div>
            <div class="mesbox">
                <div class="maxbutton" @click="gologin" id="first"><span class="buttonmes">登陆云隐</span></div>
            </div>
          
            </div>
            <div id="join">
            <form>
                  <input class="maininput" type="text" id="joinname" placeholder="昵称">
            <input class="maininput" type="text" id="jointel" placeholder=" 请输入手机号码">
             <input class="maininput" type="text" id="joinpas" placeholder=" 请设置密码">
            <div id="teltip" v-show="telcode==400">手机号码不符合规范</div>
            <input class="mininput" type="text" id="joinnum" placeholder="短信验证码">
             <div class="mes" @click="gettext"> <span class="minmes">发送短信验证码</span></div>
             <div id="sumtip" v-show="telcode==400">{{tip}}</div>
             <div class="maxbutton" @click="surejoin"><span class="buttonmes">立即注册</span></div>
            </form>
            </div>
            <div id="lastbox"><input type="checkbox"><span> 我已同意《用户协议》条款</span>
            <router-link to='/yunyin/vmain'><span id="pass">暂不登陆</span></router-link>
            </div>
        </div>

    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:"loginmain",
    data(){
        return{
            telcode:'',
            pascode:'',
            tipcode:'',
            tip:'',
        }
    },
    methods:{
        gologin(){
            let that=this;
            let tel=document.getElementById("jointel").value;
            let pas=document.getElementById("joinpas").value;
            axios.post("http://39.101.203.189:3000/login/cellphone?phone="+tel+"&password="+pas).then(function(response) {
                        console.log(response);
                       that.pascode= response.data.code
                        if(response.data.code==200){
                            that.$router.push('/yunyin/vmain')
                        }
                    }, function(err) {})
        },
        surejoin(){
            let that=this;
            let name=document.getElementById("joinname").value;
            let tel=document.getElementById("jointel").value;
            let pas=document.getElementById("joinpas").value;
            let num=document.getElementById("joinnum").value;
            console.log(name,tel,pas,num)
              axios.post("http://39.101.203.189:3000/cellphone/existence/check?phone="+tel).then(function(response) {
                        if(response.data.exist!=-1){
                                    that.$message({
                        message: '该手机号已被注册',
                        type: 'warning'
                        })
                        console.log(response.data)
                        }
                            axios.post("http://39.101.203.189:3000/register/cellphone?phone="+tel+'&password='+pas+'&captcha='+num+'&nickname='+name).then(function(response) {
                        console.log(response.data);
                        that.tipcode=response.data.code;
                        that.tip=response.data.message;
                        if(response.data.code==200){
                            that.$message({
                        message: '注册成功',
                        type: 'success'
                            });
                            that.$router.push('/yunyin/vmain')
                        }
                    }, function(err) {})
                        
                    }, function(err) {})
        },
         gettext(){
             let that=this;
             let tel=document.getElementById("jointel").value;
             console.log(tel)
            axios.post("http://39.101.203.189:3000/captcha/sent?phone="+tel).then(function(response) {
                        if(response.data.code==200){
                            that.$message({
                        message: '验证码已发送',
                        type: 'success'
        })}
                        that.telcode=response.data.code;
                    }, function(err) {})
        },
        tojoin(){
            document.getElementById("login").style.display="none";
            document.getElementById("join").style.display="block";
            document.getElementById("minword0").style.display="block"
             document.getElementById("minword").style.display="none"
        },
        tologin(){
            document.getElementById("login").style.display="block";
            document.getElementById("join").style.display="none";
            document.getElementById("minword0").style.display="none"
             document.getElementById("minword").style.display="block"
        },
       

    }

}
</script>

<style scoped>
#pass{
    margin-left: 280px;
    color: #6d0411;
}
#main{
    position: relative;
    top:-60px;
    width: 100%;
    height: 110%;
    background-color: #222031;
}
.leftimg{
    position: absolute;
    width: 533px;
    height: 800px;
    left: 0px;
}
#rightbox{
    position: absolute;
    top:100px;
    left: 35%;
    color: aliceblue;
    z-index: 1000;
    text-align: left;
}
#topword{
    color: aliceblue;
    font-size: 40px;
}
#twoword{
    color: aliceblue;
    font-size: 25px;
    font-weight: 300;
}
#minword,#minword0{
    position: absolute;
    left: 180px;
    top:130px;
    color: aliceblue;
    font-size: 20px;
    font-weight: 500;
    margin-left: 300px;
    color: #6d0411;
    cursor: default;
}
#minword0{
    /* position: relative;
    left: 180px;
    top:-25px; */
    display: none;
}
.maininput,.mininput{
position: relative;
top:20px;
margin-top: 30px;
width: 560px;
height: 49px;
border: solid 2px rgb(163, 163, 163);
font-size: 20px;
color: aliceblue;
background: none;
outline: none;
display: block;
}
#join{
    position: relative;
    top:-25px;
    display: none;                                     

}
/* #login{
    display: none;
} */
.mesbox{
    position: relative;
    top:30px;
}
.mininput{
width:200px;
 display: inline-block;
}
#teltip,#pastip,#sumtip{
position: relative;
top:30px;
color: #6d0411;
}
.mes{
    position: relative;
    top:10px;
    left: 40px;
    width: 320px;
    height: 56px;
    text-align: center;
    border-radius: 3px;
    background-color: #6d0411;
    display: inline-block;
}
.minmes{
    position: relative;
    top:10px;
    font-size: 23px;
    font-weight: 100;
    cursor: default;
}
.maxbutton{
     position: relative;
     top:60px;
     width: 570px;
    height: 70px;
    text-align: center;
    border-radius: 5px;
    background-color: #6d0411;
    display: block;
    cursor: default;
}
.buttonmes{
     position: relative;
    top:12px;
    font-size: 30px;
    font-weight: 520;
}
#lastbox{
    position:relative;
    top:130px;
    color:aliceblue;
    font-size: 16px;
    cursor: default;
}
</style>